<div style="width:600px; height:550px; margin-left:30px; background-color:#fff;">
  <center><img src="<?php e($this->base) ?>/img/step1.png" style="margin-top:15px;" /></center>
  <div id="pages" style="padding:15px 20px 20px;">
    <table width="100%" cellpadding="5" cellspacing="0" border="0">
      <tr>
        <td width="48%"><b><?php __('I am a new customer'); ?></b></td>
        <td width="2%">&nbsp;</td>
        <td width="48%"><b><?php __('Returning Customer'); ?></b></td>
      </tr>
      <tr>
        <td valign="top" style="border:1px solid #ccc; padding:10px;">
          <div style="margin-bottom:20px;"><?php __('New Customer'); ?></div>
          <div style="margin-bottom:20px;"><?php __('By creating an account you will be able to shop faster, be up to date on an orders status, and keep track of the orders you have previously made.'); ?></div>
          <div class="center"><input type="button" value="<?php __('Continue'); ?>" onclick="register();" /></div>
        </td>
        <td>&nbsp;</td>
        <td valign="top" style="border:1px solid #ccc; padding:10px;">
          <div style="margin-bottom:20px;"><?php __('I am a returning customer.'); ?></div>
          <form id="form-login2" method="post" action="<?php e($this->base); ?>/members/login" name="loginform" onsubmit="return login2();">
            <div style="color:#777777; font-size:13px;"><strong><?php __('User Id'); ?></strong></div>
            <input type="text" id="username2" name="username" tabindex="20" size="20" class="input"
             style="background:#FBFBFB; width:200px; border:1px solid #E5E5E5; margin: 5px 0; padding:3px;" />
            <div style="color:#777777; font-size:13px;"><strong><?php __('Password'); ?></strong></div>
            <input type="password" id="password2" name="password" tabindex="20" size="20" class="input"
             style="background:#FBFBFB; width:200px; border:1px solid #E5E5E5; margin: 5px 0; padding:3px;" />
            <div class="center">
              <input type="submit" id="login-button" value="Log In" />
              <a href="<?php e($this->base); ?>/members/forgot"><?php __('Forgot Password?'); ?></a>
            </div>
          </form>
        </td>
      </tr>
    </table>
  </div>
</div>

<script>
var _webroot = '<?php e($this->base); ?>';
function message (msg, focus) {
    alert(msg);

    if (typeof focus != 'undefined') {
        Ext.fly(focus).focus();
    }
} // message

function login2 () {
    var form_log = Ext.query('input', 'form-login2');
    var user_id  = Ext.get('username2');
    var password = Ext.get('password2');

    if (!user_id.getValue()) {
        message('Please enter your user id', 'username2');
        return false;
    }
    if (!password.getValue()) {
        message('Please enter your password', 'password2');
        return false;
    }

    transId = Ext.Ajax.request({
        form: 'form-login2',
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            if (typeof obj != 'object') {
                message('Something is wrong, would you mind to try again later?', 'username');
                return false;
            } else if (obj.status == false) {
                var mesg = (obj.mesg) ? obj.mesg : 'Login failure, please try again..';
                password.dom.value = '';
                message(mesg, 'username2');
                return false;
            } else {
                password.fadeOut();
                Ext.fly('form-login2').fadeOut({ useDisplay:true });
                Ext.fly('form-login2').insertHtml('afterEnd', '<span id="status" style="display:none;">Accessing..</span>');
                Ext.fly('status').pause(1).fadeIn();
                document.location = '<?php e($this->base); ?>/members/shipping';
            }
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('login-button').dom.value = 'Log In';
            Ext.each(form_log, function(e){ e.disabled = false });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.fly('login-button').dom.value = 'Logging..';
        Ext.each(form_log, function(e){ e.disabled = true });
    }

    return false;
} // login2

function register () {
    document.location = _webroot+'/members/register';
} // register
</script>